﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BillingNote.Default" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var addTab = function (tabPanel, id, url) {
            var tab = tabPanel.getComponent(id);

            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: url,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        url: url,
                        mode: "iframe",
                        maskMsg: "Loading " + url + "..."
                    }
                });

                tab.on("activate", function () {
                    var item = MenuPanel1.menu.items.get(id + "_item");

                    if (item) {
                        MenuPanel1.setSelection(item);
                    }
                }, this);
            }

            tabPanel.setActiveTab(tab);
        }


        var filterTree = function (el, e) {
            var tree = TreePanel1,
                text = this.getRawValue();

            tree.clearFilter();

            if (Ext.isEmpty(text, false)) {
                return;
            }

            if (e.getKey() === Ext.EventObject.ESC) {
                clearFilter();
            } else {
                var re = new RegExp(".*" + text + ".*", "i");

                tree.filterBy(function (node) {
                    return re.test(node.text);
                });
            }
        };

        var clearFilter = function () {
            var field = TriggerField1,
                tree = TreePanel1;

            field.setValue("");
            tree.clearFilter();
            tree.getRootNode().collapseChildNodes(true);
            tree.getRootNode().ensureVisible();
        };


        var loadPage = function (tabPanel, node) {
            var tab = tabPanel.getItem(node.id);

            if (!tab) {
                tab = tabPanel.add({
                    id: node.id,
                    title: node.text,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        url: node.attributes.href,
                        mode: "iframe",
                        maskMsg: "Loading " + node.attributes.href + "..."
                    },
                    listeners: {
                        update: {
                            fn: function (tab, cfg) {
                                cfg.iframe.setHeight(cfg.iframe.getSize().height - 20);
                            },
                            scope: this,
                            single: true
                        }
                    }
                });
            }

            tabPanel.setActiveTab(tab);
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
     <ext:Viewport ID="Viewport1" runat="server">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North>
                         <ext:Panel ID="Panel1" 
                                runat="server"
                                Height="100"
                                Html="North"
                            />
                    </North>
                    <West>
                        <ext:TreePanel 
                            ID="TreePanel1"
                            runat="server" 
                            Width="250" 
                            Title="Main Menu" 
                            Icon="ChartOrganisation">    
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" />
                                        <ext:ToolbarSpacer />
                                        <ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
                                            <Triggers>
                                                <ext:FieldTrigger Icon="Clear" />
                                            </Triggers>
                            
                                            <Listeners>
                                                <KeyUp Fn="filterTree" Buffer="250" />
                                                <TriggerClick Handler="clearFilter();" />
                                            </Listeners>
                                        </ext:TriggerField>

                                        <ext:ToolbarFill ID="ToolbarFillList" runat="server" />
                                        <ext:SplitButton ID="SplitButton1" runat="server" Icon="Cog">
                                            <Menu>
                                                <ext:Menu ID="Menu1" runat="server">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem1" runat="server" Text="Expand All">
                                                            <Listeners>
                                                                <Click Handler="#{TreePanel1}.expandAll();" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem2" runat="server" Text="Collapse All">
                                                            <Listeners>
                                                                <Click Handler="#{TreePanel1}.collapseAll();" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>        
                            <Listeners>
                                <Click Handler="if (node.attributes.href) { e.stopEvent(); loadPage(#{Pages}, node); }" />
                            </Listeners>
                        </ext:TreePanel>
                    </West>
                    
                    <Center>
                       <ext:TabPanel ID="Pages" runat="server" EnableTabScroll="true">
                            <Items>
                            <ext:Panel 
                                runat="server" 
                                Title="Dashboard" 
                                Border="false" 
                                Padding="6"
                                Html="East Tab 1"
                                />
                            </Items>
                       </ext:TabPanel>
                    </Center>
                    
                    
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
</body>
</html>
